<template>
	<div class="rider">
		<a-layout>
			<a-page-header>
				<a-form class="form" layout="inline">
					<a-row>
						<a-form-model-item ref="order_no" label="姓名" prop="order_no">
							<a-input
								v-model.trim="queryForm.name"
								placeholder="姓名"
								allowClear
							/>
						</a-form-model-item>
						<a-form-model-item ref="order_no" label="手机号" prop="order_no">
							<a-input
								v-model.trim="queryForm.mobile"
								placeholder="手机号"
								allowClear
							/>
						</a-form-model-item>

						<a-form-model-item>
							<a-select
								allowClear
								v-model="queryForm.market_id"
								style="width: 140px"
								@change="handleMarketChange"
								placeholder="所属市场"
							>
								<a-select-option
									v-for="(item, index) in marketData"
									:key="index"
									:value="item.id"
								>
									{{ item.name }}
								</a-select-option>
							</a-select>
						</a-form-model-item>

						<a-form-model-item class="operation-button">
							<a-button
								v-has="'rider.queryData'"
								@click="fetch"
								:disabled="
									Object.values(queryForm).every((item) => {
										return !item
									})
								"
								type="primary"
								icon="search"
								>搜索</a-button
							>
							<a-button
								v-has="'rider.queryData'"
								:disabled="
									Object.values(queryForm).every((item) => {
										return !item
									})
								"
								@click="clear"
								icon="delete"
								style="margin-left: 18px"
								>清空</a-button
							>
						</a-form-model-item>
					</a-row>
				</a-form>
			</a-page-header>
			<a-layout-content style="background: #fff">
				<a-tabs default-active-key="1" @change="callback">
					<a-tab-pane key="1" tab="转运手">
						<h2>可用转运手</h2>
					</a-tab-pane>
					<a-tab-pane key="2" tab="待审核" force-render>
						<h2>待审核的申请</h2>
					</a-tab-pane>
					<a-tab-pane key="3" tab="驳回">
						<h2>被驳回的申请</h2>
					</a-tab-pane>
				</a-tabs>

				<a-table
					:columns="columns"
					:data-source="riderData"
					@change="handleTableChange"
					:pagination="pagination"
					:loading="loading"
					:rowKey="
						(record, index) => {
							return index
						}
					"
				>
					<span
						slot="img"
						slot-scope="text, record"
						style="
							display: inline-block;
							width: 35px;
							height: 35px;
							border-radius: 50%;
							background: #ccc;
						"
					>
						<img
							v-if="record.img"
							:src="record.img ? record.img : undefined"
							alt=""
							:class="{ avatar: true }"
							@click="enlarge($event)"
						/>
					</span>

					<template v-slot:name="{ name, id }">
						<a-tooltip :title="name" placement="topLeft">
							<router-link :to="riderViewURI(id)">{{ name }}</router-link>
						</a-tooltip>
					</template>

					<template v-slot:code="{ code }">
						<a-tooltip :title="code" placement="topLeft">
							{{ code }}
						</a-tooltip>
					</template>

					<template v-slot:cp="{ cp }">
						<a-tooltip :title="cp ? cp.name : undefined" placement="topLeft">
							{{ cp ? cp.name : undefined }}
						</a-tooltip>
					</template>

					<template v-slot:market_name="{ market_name }">
						<a-tooltip :title="market_name" placement="topLeft">
							{{ market_name }}
						</a-tooltip>
					</template>

					<template v-slot:map_area_list="{ map_area_list }">
						<a-tooltip :title="arrTostr(map_area_list)" placement="topLeft">
							{{ arrTostr(map_area_list) }}
						</a-tooltip>
					</template>

					<span slot="status" slot-scope="text, record">
						{{ getStatusToStr(record.status) }}
					</span>
					<span slot="is_valid" slot-scope="text, record">
						{{ getIsValidStr(record.is_valid) }}
					</span>

					<span slot="action" slot-scope="text, record">
						<template>
							<a
								v-has="'rider.queryData'"
								v-if="record.is_valid == 1 || record.is_valid == -1"
								@click="setRiderStatus(record.id, 0)"
								>重审</a
							>
							<a-divider
								type="vertical"
								v-if="record.is_valid == 1 && record.is_valid == 0"
							/>
							<a
								v-has="'rider.queryData'"
								v-if="record.is_valid == 0"
								@click="setRiderStatus(record.id, 1)"
								>通过</a
							>
							<a-divider type="vertical" v-if="record.is_valid == 0" />
							<a
								v-has="'rider.queryData'"
								v-if="record.is_valid == 0"
								@click="setRiderStatus(record.id, -1)"
								>驳回</a
							>
						</template>
					</span>
				</a-table>

				<div class="enlarge">
					<div class="mark" ref="mark" @click="closeMark">
						<img class="mark-img" :src="markImg" alt="" />
						<span class="iconfont icon-guanbi"> </span>
					</div>
				</div>
			</a-layout-content>
		</a-layout>
	</div>
</template>
<script>
	import day from "@/utils/day"
	import rider_api from "@/api/rider"
	import salemarket from "@/api/salemarket"
	const riderData = []
	export default {
		data() {
			return {
				riderData,
				columns: [
					{
						title: "头像",
						align: "center",
						key: "img",
						scopedSlots: {
							customRender: "img",
						},
					},
					{
						title: "姓名",
						ellipsis: true,
						key: "name",
						align: "center",
						scopedSlots: {
							customRender: "name",
						},
					},
					{
						title: "手机",

						align: "center",
						dataIndex: "mobile",
						key: "mobile",
					},
					{
						title: "编号",
						ellipsis: true,
						align: "center",

						key: "code",
						scopedSlots: {
							customRender: "code",
						},
					},
					{
						title: "所属场内cp名",
						ellipsis: true,
						align: "center",
						key: "cp",
						scopedSlots: {
							customRender: "cp",
						},
					},
					{
						title: "所在市场",
						align: "center",
						ellipsis: true,
						key: "market_name",
						scopedSlots: {
							customRender: "market_name",
						},
					},
					{
						title: "所在区域",
						key: "map_area_list",
						ellipsis: true,
						align: "center",
						scopedSlots: {
							customRender: "map_area_list",
						},
					},
					{
						title: "状态",
						sorter: false,

						align: "center",
						scopedSlots: {
							customRender: "is_valid",
						},
					},
					{
						title: "运力状态",
						sorter: false,

						align: "center",
						scopedSlots: {
							customRender: "status",
						},
					},
					{
						title: "身份证",
						sorter: false,
						dataIndex: "id_card",
						key: "id_card",

						align: "center",
					},

					{
						title: "注册时间",
						sorter: false,
						dataIndex: "create_time",
						key: "create_time",

						align: "center",
					},

					{
						title: "操作",
						sorter: false,

						align: "center",
						scopedSlots: {
							customRender: "action",
						},
					},
				],
				queryForm: {
					// status: undefined,
					market_id: undefined,
					name: undefined,
					mobile: undefined,
				},
				markImg: "",
				tbodyHeight: 0,
				validTab: 1, //表示当前Tab转运手的状态 -1:冻结 0:待审核 1：正常
				loading: false,
				marketData: [],
				pagination: {
					current: 1,
					pageSize: 20,
					total: 0,
					totalPage: 0,
					showSizeChanger: true,
					showTotal: (total) => `总 ${total} 条`,
				},
			}
		},
		mounted() {
			this.fetch()
			// 获取批发市场列表
			this.getMarketList()
		},
		components: {
			// "my-table": () => import("./table.vue"),
		},
		methods: {
			async getMarketList(params = {}) {
				// this.resetFormFields()
				this.marketData = []

				await salemarket.query(params).then((response) => {
					console.log("市场列表数据", response)
					if (response.code !== 1) {
						this.$message.warning(response.message)
						return
					}

					if (response.data && response.data.length > 0) {
						this.marketData = response.data.map((item) => {
							return {
								id: item.id,
								name: item.name,
							}
						})
					}
				})
			},
			handleMarketChange(market_id) {
				this.queryForm.market_id = market_id

				this.fetch()
			},
			closeMark({ target }) {
				console.log(target)
				if (target.nodeName === "DIV" || target.nodeName === "SPAN") {
					this.$refs["mark"].style.display = "none"
					this.markImg = ""
				}
			},
			enlarge({ target }) {
				this.$refs["mark"].style.display = "block"
				this.markImg = target.src
				console.log(target)
			},
			riderViewURI(riderID) {
				let riderURI = "/rider/riderView/"
				let str = riderURI + riderID
				// console.log(str)
				return str
			},
			setRiderStatus(id, is_valid = 0) {
				const msgtime = 3
				rider_api.putValid(id, { is_valid, status: is_valid }).then((res) => {
					console.log(res)
					console.log("now refresh" + this.pagination.current)
					switch (is_valid) {
						case 0:
							this.$message.success("转运手状态已经变更为待审核。", msgtime)
							break
						case 1:
							this.$message.success("转运手申请已经通过。", msgtime)
							break
						default:
							this.$message.success("转运手申请已经驳回。", msgtime)
							break
					}
					// this.queryForm.status = is_valid
					this.fetch(this.pagination.current)
				})

				return
			},
			getIsValidStr(isValid) {
				return rider_api.isValidToStr(isValid)
			},
			getStatusToStr(status) {
				return rider_api.statusToStr(status)
			},
			arrTostr(map_area_list) {
				// console.log(map_area_list)
				if (map_area_list && map_area_list.length > 0) {
					return map_area_list
						.map((item) => {
							return item.name
						})
						.join("\r\n")
				} else {
					return
				}
			},
			handleTableChange(pagination, filters, sorter) {
				console.table(
					[
						{
							pagination: pagination,
							filters: filters,
							sorter: sorter,
						},
					],
					["pagination", "filters", "sorter"]
				)
				if (sorter) {
					if (sorter.order) {
						Object.assign(this.queryForm, {
							order_by: `${sorter.columnKey} ${sorter.order.slice(0, -3)}`,
						})
					} else {
						delete this.queryForm.order_by
					}
				}
				this.pagination = pagination || this.pagination
				// this.getData()
				this.fetch(this.pagination.current)
			},
			calcTotalTdHeight() {
				let tbody = document.querySelector(".rider .ant-table-tbody")
				console.log(tbody.offsetHeight / 3)
				this.tbodyHeight = Math.round(tbody.offsetHeight / 3)
			},
			// calcTableWidth(columns) {
			// 	let totalWidth = 0
			// 	for (let i = 0, len = columns.length; i < len; i++) {
			// 		if (columns[i].width) {
			// 			totalWidth += columns[i].width
			// 		} else {
			// 			totalWidth += 120
			// 		}
			// 	}
			// 	return totalWidth
			// },
			callback(key) {
				console.log(key)
				switch (parseInt(key)) {
					case 1:
						this.validTab = 1
						this.pagination.current = 1
						break
					case 2:
						this.validTab = 0
						this.pagination.current = 1
						break
					default:
						this.validTab = -1
						this.pagination.current = 1
						break
				}
				console.log("validTab" + this.validTab)
				this.fetch(this.pagination.current)
			},
			clear() {
				this.queryForm = {
					name: undefined,
					mobile: undefined,
				}
				this.fetch()
			},
			fetch(pageno = 1) {
				this.riderData = []
				let Rider = {}
				const queryparam = {
					page: pageno,
					pageSize: this.pagination.pageSize,
					is_valid: this.validTab,
					...this.queryForm,
					order_by: "create_time desc",
				}

				// this.$message.loading({ content: "Loading...", duration: 0 })

				rider_api
					.queryData(queryparam)
					.then((res) => {
						console.log("骑手列表", res)
						let RiderArray = res.data
						this.pagination.total = res.page.totalSize
						// this.pagination.current = pageno
						this.pagination.current = res.page.page
						RiderArray.forEach((item) => {
							Rider.cp = item.cp
							Rider.map_area_list = item.map_area_list
							Rider.name = item.name
							Rider.mobile = item.mobile
							Rider.id = Number(item.id)
							Rider.id_card = item.id_card
							Rider.nickname = item.nickname
							Rider.img = item.img_head
							Rider.code = item.code
							Rider.is_valid = item.is_valid
							// Rider.market_id = item.market_id
							Rider.market_name = item.market_name
							Rider.status = item.status
							Rider.verify_status = item.verify_status
							Rider.create_time = day.FormatDate(
								item.create_time,
								"YYYY-MM-DD HH:mm"
							)

							this.riderData.push({ ...Rider })
						})

						console.table({
							riderData: this.riderData,
						})
						this.$nextTick(() => {
							this.calcTotalTdHeight()
						})

						// this.$message.success({ content: res.message, duration: 2 })

						//nickname mobile id_card create_time
					})
					.catch((err) => {
						console.dir(err)
						// this.$message.success({ content: res.data.message, duration: 2 })
					})
			},
		},
	}
</script>
<style scoped lang='less'>
	.rider {
		.avatar {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.enlarge {
			.mark {
				display: none;
				width: 100vw;
				height: 100vh;
				background-color: rgba(0, 0, 0, 0.5);
				z-index: 99;
				position: fixed;
				left: 0;
				top: 0;
				.mark-img {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 350px;
					height: 350px;
					z-index: 99;
				}
				.icon-guanbi {
					position: absolute;
					right: 50px;
					top: 50px;
					color: #fff;
					font-size: 36px;
					cursor: pointer;
				}
			}
		}
	}
</style>
